<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fullpage.js练习</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.css"
      integrity="sha512-c2/xySTiUmIa2PzQAnKZVYi2+aJmyaI6rweK5GCL1HbHx70/Zub0RhYPy5RFbJsStRo+HTForawyFBgBp6btJA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="resource/css/fullpage-demo.css" />
  </head>
  <body>
    <ul id="myMenu" class="list-unstyled">
      <li data-menuanchor="firstpage" class="active">
        <a href="#firstpage">First section</a>
      </li>
      <li data-menuanchor="secondpage">
        <a href="#secondpage">Second section</a>
      </li>
      <li data-menuanchor="thirdpage">
        <a href="#thirdpage">Third section</a>
      </li>
      <li data-menuanchor="fourthpage">
        <a href="#fourthpage">Fourth section</a>
      </li>
    </ul>
    <div id="fullpage">
      <div class="section" id="page1">
        <h1>首屏标题</h1>
      </div>
      <div class="section" id="page2">
        <video id="myVideo" loop muted data-autoplay playsinline>
          <source
            src="
          https://oss-yangjh.oss-cn-chengdu.aliyuncs.com/video/flowers.mp4"
            type="video/mp4"
          />
        </video>
        <div class="layer">
          <h1>fullPage.js videos</h1>
        </div>
      </div>
      <div class="section">Some section</div>
      <div class="section">Some section</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.min.js"
      integrity="sha512-2N6afhHcaOPaBztibhzvEp9MBtXoG+6YQ5AkllMJKHrZKUUiHHmIc1bEafMDjG+LnTtSIYjaKdg2BdZqqZkkBQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      //   new fullpage("#fullpage", {
      //     anchors: ["firstpage", "secondpage", "thirdpage", "forthpage"],
      //     menu: "#myMenu",
      //     credits: null,
      //   });
      $(document).ready(function () {
        $("#fullpage").fullpage({
          //options here

          anchors: ["firstpage", "secondpage", "thirdpage", "forthpage"],
          menu: "#myMenu",
          credits: null,
          afterLoad: function (origin, destination, direction, trigger) {
            // console.log(origin, destination, direction, trigger);
            // console.log(destination.anchor);
            if (destination.anchor == "firstpage") {
              //   console.log("进入首页");
              $("#myMenu").hide();
            } else {
              $("#myMenu").show();
            }
            if (destination.anchor == "secondpage") {
              $("#myMenu a").css({ color: "white" });
            } else {
              $("#myMenu a").css({ color: "black" });
            }
          },
        });
      });
    </script>
  </body>
</html>
